<div class="contentDiv">
	<div class="detaBox w1200">
		<!--面包屑导航-->
		<div class="crumbs">
			<span>您当前所在位置：</span>
			<a href="#">首页</a>
			<em>-</em>
			<span id="mer_detail_uType"></span>
			<em>-</em>
			<a class="cur" href="#" id="mer_detail_name"></a>
		</div>
		<div class="detaTop cleafix">
			<div class="detatL fl">
				<img src="" id="mer_detail_img" />
				<p id="mer_detail_ge"></p>
			</div>
			<div class="detatR fr">
				<h2 id="mer_detail_nameType">
				</h2>
				<h3 id="mer_detail_local">
				</h3>
				<h3 id="mer_detail_credi"></h3>
				<h3 id="mer_detail_qual"></h3>
				<h3 id="mer_detail_enterTime"></h3>
				<h3>
					<span>选择日期：</span>
					<input class="laydate-icon" id="md_mer_date"  onclick="laydate({istime: true, format: 'YYYY-MM-DD', min: laydate.now(1)})"/>
					<em class="detaEm1">午餐</em>
					<em class="detaEm1">晚宴</em>
				</h3>
				<h4 id="mer_detail_production">
				</h4>
				<h3>
					<span>数量：</span>
					<div class="trdiv">
						<button class="button2">-</button>
						<input id="md_mer_qty_item" price="30" type="text" class="qty_item" value="1" />
						<button class="button1">+</button>
					</div>
					<em id="md_mer_problem" class="detaEm2"><b>有问题，问问我吧</b></em>
				</h3>
				<h3><a id="md_direct_buy" class="detaEm2 detaEm3">立即购买</a><a id="md_add_trolley" class="detaEm2 detaEm4">加入购物车</a></h3>
			</div>
		</div>
	</div>
	<!--滚动监听-->
	<div class="scrollSpy w1200">
		<div class="scroTop">
			<a class="link1" href="#business">商家详情</a>
			<a class="link2" href="#service">服务内容</a>
			<a class="link3" href="#area">服务区域</a>
			<a class="link4" href="#schedule">商家档期</a>
			<a class="link5" href="#commend">推荐团队</a>
			<a class="link6" href="#works">我的作品</a>
			<a class="link7" href="#reviews">我的评论</a>
		</div>
		<!--商家详情-->
		<div id="business">
			<div class="title title1">
				<span><i><img src="/by-webhtml/assets/image/ico49.png" /></i>商家简介</span>
			</div>
			<div class="ud_business_intro"></div>
			<div class="line"></div>
		</div>
		<!--服务内容-->
		<div id="service">
			<div class="title title1">
				<span><i><img src="/by-webhtml/assets/image/ico50.png" /></i>服务内容</span>
			</div>
			<p class="scroP">策划师提供服务包括：中式婚礼、西式婚礼、DIY婚礼</p>
			<p class="scroP">策划服装和主持风格：根据需要安排服装，婚庆风格会和新人婚礼前沟通</p>
			<p class="scroP">策划师是否当面沟通：策划师会根据新人要求，约好时间在博艺网OTO门店线下沟通</p>
			<div class="line"></div>
		</div>
		<!--服务区域-->
		<div id="area">
			<div class="title title1">
				<span><i><img src="/by-webhtml/assets/image/ico51.png" /></i>服务区域</span>
			</div>
			<div class="areaDiv">
			</div>
			<div class="line"></div>
		</div>
		<!--商家档期-->
		<div id="schedule">
			<div class="title title1">
				<span><i><img src="/by-webhtml/assets/image/ico52.png" /></i>商家档期</span>
				<em class="ico1">档期可选</em>
				<em class="ico">档期已满</em>
				<label><a class="ico"></a><b>2017年5月</b><a class="ico1"></a></label>
			</div>
			<div class="calendar">
				<h2>
					<span>日期</span>
				</h2>
				<h2>
					<span>星期</span>
				</h2>
				<h2><span>午宴</span></h2>
				<h2><span>晚宴</span></h2>
			</div>
			<div class="line"></div>
		</div>
		<!--推荐团队-->
		<div id="commend">
			<div class="team">
				<div class="title title1">
					<span><i><img src="/by-webhtml/assets/image/ico42.png" /></i>推荐团队</span>
				</div>
				<ul class="teamDiv cleafix">
				</ul>
				<div class="line"></div>
			</div>
		</div>
		<!--我的作品-->
		<div id="works">
			<div class="title title1">
				<span><i><img src="/by-webhtml/assets/image/ico53.png" /></i>我的作品</span>
			</div>
			<div class="caseDiv">
				<ul class="caseList cleafix">
				</ul>
			</div>
		</div>
		<!--我的评论-->
		<div id="reviews">
			<div class="rating">
				<div class="title title1">
					<span><i><img src="/by-webhtml/assets/image/ico44.png" /></i>我的评价</span>
				</div>
				<ul class="ratiUl">
				</ul>
				<div class="page"></div>
				<div class="line"></div>
			</div>
		</div>
	</div>
	<!--猜你喜欢-->
	<div class="particDiv w1200">
		<div class="partic">
			<div class="title">
				<span><i><img src="/by-webhtml/assets/image/ico23.png" /></i>猜你喜欢</span>
				<em>CAINIXIHUAN</em>
			</div>
			<ul class="particUl likeDiv clearfix"></ul>
		</div>
	</div>
</div>
<!--遮罩-->
<div class="desk"></div>
<!--弹窗-->
<div id="md_mer_popup_div" class="layerDiv">
	<span class="closeDiv"></span>
	<h2>填写手机号码</h2>
	<h3>我们的专属顾问会在第一时间与您取得联系</h3>
	<ul>
		<li><input id="md_mer_mobile" class="loginTxt" type="text" value="请输入手机号" onmouseover="this.focus();" this.select();="" onclick="if(value==defaultValue){value='';}" onblur="if(!value){value=defaultValue;}" /></li>
		<li><input id="md_mer_valid_code" class="loginTxt loginTxt2" type="text" value="请输入验证码"  onmouseover="this.focus();" this.select();="" onclick="if(value==defaultValue){value='';}" onblur="if(!value){value=defaultValue;}"/><input id="md_mer_get_code" class="loginBut1" type="button" value="免费获取验证码" /></li>
		<li><textarea id="comments" class="loginTxt jq_watermark" placeholder=" " rows="3"></textarea></li>
		<li><input id="md_mer_vcode_submit" class="loginBut" type="button" value="立即提交" /></li>
	</ul>
</div>
<!-- 数字加减控件 -->
<script type="text/javascript" src="by-webhtml/lib/luokeke.js" ></script>
<script type="text/javascript" >
	$(function() {
//        //添加购物车
//        $(".detaEm4").click(function(ev){
//
//        });
		$('.trdiv').each(function() {
			$.alerts.bindClick({
				add : $(this).find($(".button1")),
				reduce : $(this).find($(".button2")),
				qty_item : $(this).find($(".qty_item")),
				total : $(this).find($(".total")),
				price : parseFloat($(this).find(".qty_item").attr('price'))
			});
		});
		$.alerts.setTotalprice($('.trdiv').find(".total"), $('.totalprice'));
		$.alerts.setTotalNum($('.trdiv').find(".qty_item"), $('.number'));
	});
    // 添加抛物线
    function addProduct(event){
        var num = $(".cartDiv em").html() - 0;
        $(".cartDiv em").html(num + 1);
        // 设置落脚点
        var offset = $(".cartDiv").offset();
        // 获取当前点击的js对象
        var _this = $(event.target);
        var src = _this.parent("h3").parent(".detatR").siblings(".detatL").find("img").attr("src");
        var flyer = $("<img src='"+src+"' class='fly'/>");
        flyer.fly({
            start:{
                left:event.clientX, // 获取点击购物车按钮的X,Y坐标
                top:event.clientY
            },
            end:{
                left: offset.left,
                top: offset.top,
                width:20,
                height:20
            },
            onEnd:function(){
                flyer.fadeOut("slow",function(){
                    $(this).remove();
                });
            }

        });
    }
</script>
<!--textarea提示语换行-->
<script type="text/javascript" src="../../../by-webhtml/lib/watermark.js"></script>
<!--选择日期插件-->
<!--<script type="text/javascript" src="../../../../by-webhtml/lib/laydate.js" ></script>-->
<script type="text/javascript">
!function(){
	laydate.skin('yahui');//切换皮肤，请查看skins下面皮肤库
	laydate({elem: '#md_mer_date'});//绑定元素
}();

//日期范围限制
var start = {
    elem: '#start',
    format: 'YYYY-MM-DD',
    min: laydate.now(), //设定最小日期为当前日期
    max: '2099-06-16', //最大日期
    istime: true,
    istoday: false,
    choose: function(datas){
         end.min = datas; //开始日选好后，重置结束日的最小日期
         end.start = datas //将结束日的初始值设定为开始日
    }
};

var end = {
    elem: '#end',
    format: 'YYYY-MM-DD',
    min: laydate.now(),
    max: '2099-06-16',
    istime: true,
    istoday: false,
    choose: function(datas){
        start.max = datas; //结束日选好后，充值开始日的最大日期
    }
};
laydate(start);
laydate(end);

//自定义日期格式
laydate({
    elem: '#test1',
    format: 'YYYY年MM月DD日',
    festival: true, //显示节日
    choose: function(datas){ //选择日期完毕的回调
        alert('得到：'+datas);
    }
});
</script>
<script type="text/javascript">
	document.onscroll = function(){
		$('.scroTop a').removeClass("cur");
		if(document.getElementById("business").getBoundingClientRect().top  < 88){
			$('.scroTop a').removeClass("cur");
			$('.link1').addClass("cur");
		}
		if(document.getElementById("service").getBoundingClientRect().top  < 88){
			$('.scroTop a').removeClass("cur");
			$('.link2').addClass("cur");
		}
		if(document.getElementById("area").getBoundingClientRect().top  < 88){
			$('.scroTop a').removeClass("cur");
			$('.link3').addClass("cur");
		}
		if(document.getElementById("schedule").getBoundingClientRect().top  < 88){
			$('.scroTop a').removeClass("cur");
			$('.link4').addClass("cur");
		}
		if(document.getElementById("commend").getBoundingClientRect().top  < 88){
			$('.scroTop a').removeClass("cur");
			$('.link5').addClass("cur");
		}
		if(document.getElementById("works").getBoundingClientRect().top  < 88){
			$('.scroTop a').removeClass("cur");
			$('.link6').addClass("cur");
		}
		if(document.getElementById("reviews").getBoundingClientRect().top  < 88){
			$('.scroTop a').removeClass("cur");
			$('.link7').addClass("cur");
		}
		
	}
</script>